<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    /* 
      new Vue 要经历一系列的过程;这个过程当中  vue指定了 再某些节点要执行的函数

    */
    let vm = new Vue({
        // el:'#app',
        data:{
            name:"珠峰",
            age:666
        },
        // template:'<i>{{name}}</i>',
        beforeCreate() {
          // 一般不用 //一般会在编写一些vue插件的时候使用
          console.log(this.name)
        },
        created() {
          // 一般会把ajax请求放置在这个函数里执行
          console.log(this.name)
        },
        beforeMount() {
          // 真实DOM替换之前
          console.log(document.querySelector('h1'))
        },
        mounted() {
          // 真实DOM已经放到了页面上 在这个函数中我们可以操作DOM
          console.log(document.querySelector('h1'))
        },

        // 更新操作 说的数据更新 是指的 哪些能够触发视图更新的 数据改变的时候
        // 在更新的钩子函数中 一定要注意 死循环
        beforeUpdate() {
          // 数据更改 但是视图还没有更新的时候执行
          console.log('beforeUpdate')
        },
        updated() {
          console.log(arguments)
          // 视图更新完成之后执行
          console.log('updated')
          // this.name = Math.random();
        },
        beforeDestroy() {
          console.log('beforeDestroy')
        },
        destroyed() {
          // 一般会做一些定时器的清除 或者 事件的清除
          console.log('destroyed')
        },
    });
    vm.$mount("#app");
</script>